import { useState, useCallback } from "react";
import { Input, Modal } from "antd";
import { RightOutlined } from "@ant-design/icons";
import { request } from "../../common/request";
import { urls } from "../../common/urls";
import "./index.less";

function UserMark(props: any) {
  const { info } = props;
  const [value, setValue] = useState("");
  const [isModalOpen, setIsModalOpen] = useState(false);

  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

  const handleChange = (e: any) => {
    setValue(e.target.value);
  };

  const handleOk = useCallback(() => {
    request({
      method: "post",
      data: {
        method: urls.markName,
        f_uid: info.id,
        name: value
      },
    }).then((res: any) => {
        setIsModalOpen(false);
        setValue("");
    });
  }, [info, value]);

  return (
    <>
      <div className="link-item" onClick={showModal}>
        <div>备注</div>
        <div>
          {info.comment_name || info.username}
          <RightOutlined />
        </div>
      </div>
      <Modal
        title="备注"
        className="add-user-model"
        open={isModalOpen}
        onOk={handleOk}
        okText="确认"
        cancelText="取消"
        onCancel={handleCancel}
      >
        <Input
          placeholder="请输入好友备注"
          className="mark-input"
          value={value}
          onChange={handleChange}
        />
      </Modal>
    </>
  );
}

export default UserMark;
